<template>
  <div class="app-container">
    <a-card
      title="编辑资料"
      class="box-card"
      bordered
      headStyle="text-align: center;font-weight: bold;font-size: 20px;"
    >
      <a-form :model="formState" ref="formRef" :rules="rules" layout="vertical">
        <!-- 企业信息表单项 -->
        <a-form-item label="企业名称" name="name">
          <a-input
            v-model:value="formState.name"
            placeholder="请输入企业名称"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="机构类型" name="type">
          <a-input
            v-model:value="formState.type"
            placeholder="请输入机构类型"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="统一社会信用代码" name="creditCode">
          <a-input
            v-model:value="formState.creditCode"
            placeholder="请输入统一社会信用代码"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="注册地址" name="registeredAddress">
          <a-input
            v-model:value="formState.registeredAddress"
            placeholder="请输入注册地址"
            allow-clear
          />
        </a-form-item>

        <!-- 法人信息表单项 -->
        <a-row :gutter="[8, 16]">
          <a-col :span="12">
            <a-form-item label="法人代表姓名" name="corporateName">
              <a-input
                v-model:value="formState.corporateName"
                placeholder="请输入法人代表姓名"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="法人代表身份证号码" name="corporateNumber">
              <a-input
                v-model:value="formState.corporateNumber"
                placeholder="请输入法人代表身份证号码"
                allow-clear
              />
            </a-form-item>
          </a-col>
        </a-row>

        <!-- 营业执照上传 -->
        <a-form-item label="营业执照扫描件" name="businessLicense">
          <image-upload
            :file-list="fileList_banner"
            @remove="removeImage('banner')"
          />
        </a-form-item>

        <!-- 法人代表身份证扫描件上传 -->
        <a-form-item label="法人代表身份证扫描件" name="idCardCopy">
          <image-upload
            :file-list="fileList_scanningCopy"
            @remove="removeImage('scanningCopy')"
          />
        </a-form-item>

        <!-- 认证公函上传 -->
        <a-form-item label="认证公函" name="Letter">
          <image-upload
            :file-list="fileList_Letter"
            @remove="removeImage('Letter')"
          />
        </a-form-item>

        <!-- 表单操作按钮 -->
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button
            htmlType="submit"
            style="margin-right: 16px; background-color: rgba(76, 200, 126, 1)"
            type="primary"
            @click="onSave"
            >保存并提交</a-button
          >
          <a-button style="margin-left: 8px" @click="cancel">取消保存</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  PlusOutlined,
  CloseOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons-vue'

const formState = ref({
  name: '****网络有限公司',
  type: '有限责任公司（自然人独资）',
  creditCode: '90040101MA9WONTK64',
  registeredAddress: 'XXX省XXX市XXX区XXX镇XXX路XXX门牌号',
  corporateName: '李四',
  corporateNumber: '546543198003112250',
  banner: [
    'https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png',
    'https://ali-img.100520.com/images/202448/aa6197d394ed1bf888a15b466e693713_1idh1hle3.png',
  ],
  scanningCopy: [
    'https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png',
    'https://ali-img.100520.com/images/202448/aa6197d394ed1bf888a15b466e693713_1idh1hle3.png',
  ],
  Letter: [
    'https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png',
    'https://ali-img.100520.com/images/202448/aa6197d394ed1bf888a15b466e693713_1idh1hle3.png',
  ],
})
const fileList_banner = ref([])
const fileList_scanningCopy = ref([])
const fileList_Letter = ref([])

const rules = {
  name: [
    {
      required: true,
      message: '请输入企业名称',
      trigger: 'change',
    },
  ],
  type: [
    {
      required: true,
      message: '请输入机构类型',
      trigger: 'change',
    },
  ],
  registeredAddress: [
    {
      required: true,
      message: '请输入注册地址',
      trigger: 'change',
    },
  ],
  creditCode: [
    {
      required: true,
      message: '请输入统一社会信用代码',
      trigger: 'change',
    },
  ],
  corporateName: [
    {
      required: true,
      message: '请输入法人代表姓名',
      trigger: 'change',
    },
  ],
  corporateNumber: [
    {
      required: true,
      message: '请输入法人代表身份证号码',
      trigger: 'change',
    },
  ],
}

const removeImage = (type, index) => {
  if (type === 'banner') {
    formState.value.banner.splice(index, 1)
    fileList_banner.value.splice(index, 1)
  } else if (type === 'scanningCopy') {
    formState.value.scanningCopy.splice(index, 1)
    fileList_scanningCopy.value.splice(index, 1)
  } else if (type === 'Letter') {
    formState.value.Letter.splice(index, 1)
    fileList_Letter.value.splice(index, 1)
  }
}

const beforeUpload = file => {
  const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'
  if (!isJPGorPNG) {
    this.$message.error('只能上传JPG/PNG格式的图片!')
  }
  const isLt1M = file.size / 1024 / 1024 < 1
  if (!isLt1M) {
    this.$message.error('图片大小必须小于1MB!')
  }
  return isJPGorPNG && isLt1M
}

const onSave = () => {
  console.log('onSave: ', formState.value)
  console.log('onSave: fileList_banner', fileList_banner.value)
  console.log('onSave: fileList_scanningCopy', fileList_scanningCopy.value)
  console.log('onSave: fileList_Letter', fileList_Letter.value)
}

const cancel = () => {
  console.log('cancel: ', formState.value)
}
</script>

<style lang="less" scoped>
.app-container {
  width: 100%;
  padding: 0 14px;
  background: #ececec;
}

.box-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
  color: #303133;
  transition: 0.3s;
  h1 {
    height: 48px;
    text-align: center;
    font-weight: bolder;
  }
}

.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.margintop18 {
  margin-top: 18px;
}

.box_image {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 12px;
  position: relative;
  .el-icon-close {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 20px;
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
  }
}

.tips_box {
  background-color: #edfaf1;
}
</style>
